<template>
<div class="container__">
    <div class="user">
        <div class="top">
            <div class="left" v-if="myinfo">
                <img :src="myinfo.avatar" alt="">
            </div>
            <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo"  class="left" v-else style="padding:0">
                <img :src="img+'/tx.png'" alt="">
            </button>
            <div class="right">
                <div>
                    <div class="item" @click="toFans">
                        <span class="info" v-if="myinfo">{{myinfo.fans}}</span> <span class="info" v-else>0</span>

                        <span class="lable_">粉丝</span>
                    </div>
                    <div class="item" @click="toGuan">
                        <span class="info" v-if="myinfo">{{myinfo.guanzhu}}</span>
                        <span class="info" v-else>0</span>
                        <span class="lable_">关注</span>
                    </div>
                    <div class="item" @click="toDz">
                        <span class="info" v-if="myinfo">{{myinfo.zan}}</span>
                        <span class="info" v-else>0</span>
                        <span class="lable_" >获赞</span>
                    </div>
                    <div class="item" @click="toJf">
                        <span class="info" v-if="myinfo">{{myinfo.jifen}}</span>
                        <span class="info" v-else>0</span>
                        <span class="lable_">积分</span>
                    </div>
                </div>
                <div>
                    <div class="name_" v-if="myinfo&&myinfo.nickname">{{myinfo.nickname}}</div>
                    <div class="edit" v-if="myinfo" @click="editperson">编辑个人资料</div>
                    <div v-else class="name_">点击头像登录</div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <div>
                    <van-icon class="icon_name" name="comment-o" /><span>认证：</span>
                    <span v-if="!myinfo" class="renzheng">请先登录</span>
                    <span v-if="myinfo&&myinfo.is_auth==0" class="renzheng" @click="renzheng">去认证</span>
                    <span v-if="myinfo&&myinfo.is_auth==1" class="renzheng" @click="renzheng">审核中</span>
                    <span v-if="myinfo&&myinfo.is_auth==2" class="renzheng">认证失败</span>
                    <span v-if="myinfo&&myinfo.is_auth==3&&myinfo.role==1" class="renzheng">家长</span>
                    <span v-if="myinfo&&myinfo.is_auth==3&&myinfo.role==2" class="renzheng">老师</span>
                    <span v-if="myinfo&&myinfo.is_auth==3&&myinfo.role==3" class="renzheng">公司</span>
                    <span v-if="myinfo&&myinfo.is_auth==3&&myinfo.role==4" class="renzheng">媒体</span>
                    <span v-if="myinfo&&myinfo.is_auth==3&&myinfo.role==5" class="renzheng">其他</span>
                    <span v-if="myinfo&&myinfo.is_auth==3&&myinfo.role==6" class="renzheng">本地学校</span>
                </div>
                <div>
                    <van-icon class="icon_name" name="location-o" /><span>位置：</span><span v-if="myinfo&&myinfo.area">{{myinfo.area}}</span><span v-else>暂时没有设置</span></div>
                <div>
                    <van-icon class="icon_name" name="description" /><span>简介：</span><span v-if="myinfo&&myinfo.brief">{{myinfo.brief}}</span><span v-else>暂时没有设置</span></div>
            </div>
            <div class="right" @click="showIt" v-if="myinfo">
                <van-icon class="share" name="share" />
                <span>分享名片</span>
            </div>
        </div>
    </div>
    <div class="list">
        <button class="weui-cell listItem" 
                open-type="getUserInfo" 
                @getuserinfo="routerTo" 
                :data-link="item.link" 
                :data-index="index" 
                v-for="(item,index) in navlist" 
                :key="index">
            <div class="weui-cell__hd"><img :src="item.icon" alt="" class="iconimg"/> </div>
            <div class="weui-cell__bd">{{item.name}}</div>
            <div class="weui-cell__ft"><van-icon name="arrow"/></div>
        </button>
    </div>
    <saveimg :info="myinfo" :qrcode="qrcode" v-if="share" @closeShow="closeShow" @saveImg="sImg" type="1"></saveimg>
</div>
</template>

<script>
import saveimg from "@/components/saveimg"
import { interval } from "@/utils/index";

import { login } from "@/api/login";
import { getopen } from "@/api/login";

import { myinfo } from "@/api/my";
import { xdLogin } from "@/utils/login"
import {code} from "@/api/operate"
export default {
  components: {
      saveimg
  },
  data() {
    return {
      share: false,
      loginform: {
        openid: "",
        type: "mini",
        session_key: "",
        encryptData: "",
        iv: "",
        nickname: "",
        gender: "",
        avatar: "",
      },
      myinfo: null,
      navlist:[
        {icon:"/static/my/icon_01.png",name:"我的钱包",link:"/pages/money/main?type=0"},
        {icon:"/static/my/icon_03.png",name:"成为合伙人",link:"/pages/pataner/main"},
        {icon:"/static/my/icon_05.png",name:"活动课程",link:"/pages/course/main"},
        {icon:"/static/my/icon_08.png",name:"我的收藏",link:"/pages/Collection/main"},
        {icon:"/static/my/icon_10.png",name:"我的认证",link:"/pages/Authentication/main"},
        {icon:"/static/my/icon_11.png",name:"绑定手机号",link:"/pages/phoneb/main"},
        {icon:"/static/my/icon_12.png",name:"设置",link:"/pages/setting/main"},
        {icon:"/static/my/icon_13.png",name:"客服",link:"/pages/kefu/main"},
      ],
      img: this.$URL.imgurl,
      qrcode:""
    };
  },
  methods: {
    getinfo() {
      if (!wx.getStorageSync("user_info")) return (this.myinfo = null);
      myinfo().then(res => {
        this.myinfo = res.data;
        wx.setStorageSync("user_info", res.data);
      });
    },
    //分享
    showIt(e) {
      let data={};
      data.user_id=this.myinfo.id;
      data.share_type=1;
      code(data).then(res=>{
          this.qrcode=res.data;
      }).then(res=>{
         this.share = true;
      })  
      
    },
    closeShow() {
      this.share = false;
    },
    renzheng() {
      wx.navigateTo({
        url: "/pages/Authentication/main"
      });
    },
    toFans() {
      wx.getStorage({
        key: 'token',
        success: (result) => {
            wx.navigateTo({
              url: "/pages/fans/main?type=1"
            });
        },
        fail: () => {
            wx.showToast({
              title: '请先登录',
              icon: 'none',
            });
        },
        complete: () => {}
      });
        
      
    },
    toGuan() {
       wx.getStorage({
        key: 'token',
        success: (result) => {
          wx.navigateTo({
            url: "/pages/fans/main?type=2"
          });
        },
        fail: () => {
            wx.showToast({
              title: '请先登录',
              icon: 'none',
            });
        },
        complete: () => {}
      });
    },
    toDz() {},
    toJf() {
      wx.getStorage({
        key: 'token',
        success: (result) => {
          wx.navigateTo({
            url: "/pages/money/main?type=1"
          });
        },
        fail: () => {
            wx.showToast({
              title: '请先登录',
              icon: 'none',
            });
        },
        complete: () => {}
      });
    },
    editperson() {
      wx.navigateTo({
        url: "/pages/personal/main"
      });
    },
    sImg(data) {
      console.log(data)
      this.show=false
      this.closeShow()
      console.log(this.show)
    },
    // 登录
    bindGetUserInfo(e) {
      xdLogin(e).then((res)=>{
          this.myinfo=res.userInfo
      })
    },
    getUserInfoClick() {},
    routerTo(e){
        var that=this;
        // console.log(e)
        var link=e.mp.currentTarget.dataset.link;
        var index=e.mp.currentTarget.dataset.index;
        if(this.myinfo){
            wx.navigateTo({
                url: link
            });
        }else if(index==7){
            wx.navigateTo({
                url: link
            });
        }else{
            xdLogin(e).then((res)=>{
                this.myinfo=res.userInfo
            })
        }
    }
  },
  mounted() {
    this.getinfo();
  },
  onPullDownRefresh() {
    wx.showNavigationBarLoading(); //在标题栏中显示加载
    setTimeout(() => {
      this.getinfo();
      wx.hideNavigationBarLoading(); //完成停止加载
      wx.stopPullDownRefresh(); //停止下拉刷新
    }, 1500);
  },
  created() {},
  onShow() {
    wx.getStorage({
      key: 'token',
      success: (result)=>{
        this.getinfo();
      },
      fail: ()=>{},
      complete: ()=>{}
    });
    
  },
  onLoad() {}
};
</script>

<style lang="scss">
.container__ {
  background-color: #f4f5f5;
  min-height: 100vh;
  .iconimg {
    width: 18px;
    height: 18px;
    margin-right: 9px;
  }
  
  button.weui-cell{
    height: 52px;
    font-size: 14px;
    background: #fff;
    text-align: left;
    border-radius: 0;
    .iconimg {
        width: 18px;
        height: 18px;
        margin-right: 9px;
        display: block;
    }
    .van-icon{
        display: block;
    }
    &::before{
        border: none;
    }
    &::after{
        border: none;
        position: absolute;
        left: 15px;
        right: 15px !important;
        bottom: 0;
        border-radius: 0;
        border-bottom: 1rpx solid #ddd;
    }
  }
  .list{
      button.weui-cell:nth-child(5){
         margin-top: 10px;
      }
      button.weui-cell:nth-child(7){
         margin-top: 10px;
      }
  }
  .middle {
    margin: 10px 0;
  }

  .user {
    height: 194px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        height: 58px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);

        .icon_name {
          margin-right: 11px;
          font-size: 12px;
        }

        .renzheng {
          width: 59px;
          height: 19px;
          background: rgba(234, 243, 255, 1);
          border: 1px solid rgba(26, 132, 251, 1);
          border-radius: 3px;
          color: rgba(26, 132, 251, 1);
          padding: 0 10px;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-size: 11px;
        font-weight: 500;
        color: rgba(26, 132, 251, 1);

        .share {
          font-size: 22px;
          color: rgba(26, 132, 251, 1);
          height: 24px;
        }
      }
    }

    .top {
      display: flex;
      justify-content: space-between;

      .left {
        height: 84px;
        width: 84px;
        min-width: 84px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(26, 132, 251, 1);

        img {
          height: 100%;
          width: 100%;
        }
      }

      .right {
        width: 247px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .lable_ {
            font-size: 12px;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
            margin-top: 8px;
          }

          .info {
            font-size: 17px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
          }
        }

        div {
          display: flex;
          justify-content: space-between;

          .name_ {
            font-size: 16px;
            font-weight: bold;
            color: rgba(26, 132, 251, 1);
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .edit {
            width: 115px;
            height: 27px;
            border: 1px solid rgba(230, 230, 230, 1);
            border-radius: 5px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
